<template>
	<view id="recharge-box header-top-margin">
		<header-back :headerTitle="$lang('Recharge.recharge')"></header-back>
		
		<view class="content-reg">
			<view class="tran-row" @click="openPopup()">
				<view class="left">
					<image :src="walletObj.coin_img" class="arrow-icon" mode=""></image>
					<view class="tran-name">{{walletObj.name}}</view>
				</view>
				<image src="/static/icon/right_arrow_icon_01.png" class="arrow-r" mode=""></image>
			</view>
			<view class="h1">TRC20</view>
			
			<view class="recharge-code">
				<view class="code">
					<canvas v-show='!qrCode' canvas-id="qrcode" style="width: 185px; height: 185px;" class="code-img" />
					<image v-show="qrCode" :src="qrCode" class="code-img" mode=""></image>
					<view class="save-btn" @click="saveQrcodeImage">{{ $lang('Recharge.longPressToSaveTheQRCode') }}</view>
				</view>
				<view class="code">
					<view class="code-ad">{{$lang('Recharge.address')}}</view>
					<view class="name">{{walletObj.address}}</view>
					<view class="ad-btn"  @click="copyEvent()">{{$lang('Recharge.copy')}}</view>
				</view>
			</view>
			
		</view>
		
		
		<!-- 选择币种 -->
		<uni-popup ref="transPopup" type="center" :mask-click="true">
			<view class="tran-popup">
				<view class="popup-top">
					<image @click.stop="$refs.transPopup.close()" src="/static/icon/right_arrow_03.png" class="arrow-icon" mode=""></image>
					<view class="popup-title">{{ $lang('Recharge.chooseCurrency') }}</view>
					<view></view>
				</view>
				<view class="popup-ul">
					<view class="popup-li" v-for="(obj,i) in walletArr" @click.stop="getObj(obj)" :key="i">
						<view>{{obj.name}}</view>
						<image v-show="money_type == obj.money_type" src="/static/icon/icon_select_01.png" class="radio-icon" mode=""></image>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 预览图片 -->
		<!-- <view class="ims-popup-mask"  v-show="showImg">
			<view class="popup-center" @click.stop="showImg = !showImg">
				<image class="img-popup" :src="qrCode" mode="aspectFit"></image>
			</view>
		</view> -->
		
		
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
	import uQRCode from '@/utils/uqrcode.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	// import Weixin from '@/common/js/wx-jssdk.js'
export default {
	data() {
		return {
			walletArr: [],
			walletObj: {},
			cid: '',
			money_type: '',
			qrCode: '',
			showImg: false,
		};
	},
	onLoad(e) {
		this.cid = e.cid?e.cid: '',
		this.getList()
	},
	components: {
		headerBack,
		uniPopup
	},
	onShow() {

	},
	methods: {
		// 保存图片
		saveQrcodeImage() {
			// uni.saveImageToPhotosAlbum({
			// 	filePath: this.qrCode,
			// 	success: () => {
			// 		uni.showToast({
			// 			title: '保存成功',
			// 			mask: true
			// 		})
			// 	}
			// });
			// Weixin.scanQRCode((res)=>{
			// 	console.log(res)
			// })
			// this.showImg = true
		},
		makeQRCode(qrcode) {
			uQRCode.make({
				canvasId: 'qrcode',
				componentInstance: this,
				text: qrcode,
				size: 185,
				margin: 10,
				backgroundColor: '#ffffff',
				foregroundColor: '#000000',
				fileType: 'jpg',
				correctLevel: uQRCode.defaults.correctLevel,
				success: res => {
					this.qrCode = res
					// console.log(this.qrCode)
				}
			})
		},
		// 选中币种
		getObj(obj){
			this.walletObj = obj;
			this.$refs.transPopup.close();
		},
		// 获取所有币种
		getList(){
			this.$api.sendRequest({
				url: '/api/wallet/coin',
				method: 'get',
				success: res=>{
					if(res.code == 0){
						this.walletArr = res.data;
						this.walletObj = this.cid ? this.walletArr.find(v=>{
							return v.money_type == this.cid;
						}) : this.walletArr[0]
						this.money_type = this.walletObj.money_type;
						this.makeQRCode(this.walletObj.address)
					}
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: err=>{
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			})
		},
		// 打开弹窗
		openPopup(){
			this.$refs.transPopup.open();
		},
		// 复制
		copyEvent() {
			this.$util.copy(this.walletObj.address)
			// uni.setClipboardData({
			// 	data: this.walletObj.address
			// });
		},
	}
};
</script>


<style>
	page {
		background: #fff;
	}
</style>

<style scoped lang="scss">
	.content-reg {
		width: 100%;
		padding: 60rpx 30rpx 0px;
		box-sizing: border-box;
	}
	.tran-row {
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #F2F3F5;
		border-radius: 16upx;
		padding: 0px 30upx;
		box-sizing: border-box;
		margin-bottom: 60upx;
		.left {
			display: flex;
			align-items: center;
			.tran-name {
				font-size: 32upx;
				color: #292929;	
				margin-left: 26rpx;
			}
			.arrow-icon {
				width: 48upx;
				height: 48upx;
			}
		}
	}
	
	.h1 {
		font-size: 40rpx;
		color: #31bb6d;
	}
	
	.recharge-code {
		padding: 92upx 52upx 0px;
		box-sizing: border-box;
		.code {
			@include flexCenter;
			flex-direction: column;
			font-size: 24upx;
			.code-img {
				width: 370upx;
				height: 370upx;
				margin-bottom: 32upx;
			}
			.code-ad {
				color: #9E95B2;
			}
			.save-btn {
				width: 230upx;
				height: 60upx;
				@include flexCenter;
				background: #FFF1F0;
				border-radius: 10upx;
				font-size: 24upx;
				color: #31bb6d;
				margin-bottom: 50upx;
			}
			.name {
				width: 100%;
				text-align: center;
				color: #292929;
				white-space: pre-line;
				word-wrap:break-word;
				margin: 22upx 0px 32upx;
			}
			.ad-btn {
				width: 136upx;
				height: 60upx;
				@include flexCenter;
				background: #FFF1F0;
				border-radius: 10upx;
				font-size: 24upx;
				color: #31bb6d;
			}
		}
	}
	
	.tran-popup {
		width: 600upx;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 30upx 20px;
		box-sizing: border-box;
		.popup-top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34upx;
			.popup-title {
				font-size: 36upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
			}
			.arrow-icon {
				width: 36upx;
				height: 36upx;
			}
		}
		
		.popup-ul {
			width: 100%;
			.popup-li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 102upx;
				border-bottom: 2upx solid #E8EDF5;
				font-size: 30upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
				.radio-icon {
					width: 36upx;
					height: 36upx;
				}
			}
			.popup-li:last-child {
				border: none;
			}
		}
	}
	
	
	.ims-popup-mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background: rgba(0, 0, 0, 0.4);
		opacity: 1;
		.popup-center {
			width: 100%;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			.img-popup {
				width: 700rpx;
				display: block;
				border-radius: 4rpx;
			}
		}
	}

	
	
</style>
